<template>
    <div class="tabs l-f">
        <a-button 
        @click="onEvent(item.path)"
        v-for="(item,index) in tabs"
        :key="index"
        class="tabs_item" 
        :class="current == index ? 'tabs_item-active' : ''" 
        :type="current == index ? 'primary' : 'default'">{{item.label}}</a-button>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'

defineProps({
    current: {
        type: Number,
        default: 0
    }
})

const { t } = useI18n()
const router = useRouter()

const tabs = reactive([
    {
        label: t('option.option'),
        path: '/optionTrading'
    },
    {
        label: t('account.contract'),
        path: '/contractTrading'
    }
])

const onEvent = (path) => {
    router.push(path)
}

</script>

<style lang="scss" scoped>
.tabs {
    margin-top: 20px;
    gap: 20px;
    &_item {
        flex: 1;
        height: 32px;
        background-color: transparent;
        color: #8683a4;
        border: 1px solid #8683a4;
        &:hover {
            color: #8683a4;
            border: 1px solid #8683a4;
        }
    }
    &_item-active {
        color: #000000;
        border: 1px solid transparent;
    }
}
</style>